<template>
  <div class="search">
    <van-nav-bar left-arrow @click-left="onClickLeft" fixed title="城市搜索结果" />
    <p class="p1">{{$route.params.city}}</p>
    <van-list v-if="isShow">
  <van-cell v-for="item in sonList" :key="item.id" :title="item.label" />
</van-list>
    <h2 v-else>宝贝,没有搜索到哦~~</h2>
  </div>
</template>

<script>
import { searchCity, sonCity } from '@/api/city'
export default {
  name: 'search-page',
  data () {
    return {
      sonList: [],
      firstCity: '',
      isShow: true

    }
  },
  methods: {
    onClickLeft () {
      this.$router.back()
    }
  },
  async created () {
    const cityName = this.$route.params.city
    console.log(cityName)
    const res = await searchCity(cityName)
    console.log(res)
    if (cityName !== res.body.label) {
      this.isShow = false
    } else {
      this.firstCity = res.body.value
      console.log(this.firstCity)
    }

    const res1 = await sonCity(this.firstCity)
    console.log(res1)
    if (res.status === 200) {
      this.sonList = res1.body
    } else {
      this.isShow = false
    }
  }
}
</script>

<style lang='less' scoped>
.search {
  margin-top: 50px;
  .p1 {
    text-align: center;
    font-size: 24px;
  }
  h2 {
    text-align: center;
  }
}
</style>
